<template>
  <div class="top-bar">
    <div class="top-bar-nav">
      <el-icon size="30" class="gis--difference"> </el-icon>
      <span class="p-l-1rem color-white">高粱管理平台</span>

      <div class="p-l-2rem">
        <!-- <router-link to="/home">
          <el-button link>首页</el-button>
        </router-link>
        <el-button link>介绍</el-button>
        <router-link to="/temp">
          <el-button link>面板</el-button>
        </router-link> -->
      </div>
    </div>
    <div class="top-bar-user">
      <div v-if="userStore.isLogin" class="flex">
        <el-button link>
          <span class="color-white">用户：{{ userStore.nickname }}</span>
        </el-button>
        <el-button link @click="userStore.logoutAction()">
          <span class="color-white">退出</span>
        </el-button>
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { useUserStore } from "@/store/modules/user";
const userStore = useUserStore();
</script>

<style scoped>
.dialog-wrapper {
  position: absolute;
  z-index: 1;
  width: 100vw;
  height: 100vh;
}

.top-bar {
  position: fixed;
  top: 0;
  z-index: 1000;
  display: flex;
  width: 100%;
  height: 46px;
  text-shadow: 2px 2px 3px #383838;

  /* background-color: rgb(255 255 255); */

  /* backdrop-filter: blur(20px) opacity(1); */

  /* box-shadow: 0 1px 0 0 rgb(0 0 0 / 21.2%); */
  align-items: center;
  justify-content: space-between;
}

.top-bar-nav {
  display: flex;
  padding-left: 2rem;
  margin-right: 100px;
  margin-left: 40px;
  align-items: center;
}

.top-bar-nav .el-button {
  padding-left: 1rem;
}

.top-bar-user {
  padding-right: 2rem;
}

.gis--difference {
  display: inline-block;
  width: 1em;
  height: 1em;

  --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath fill='%23000' d='m65.453 10.826l-.053 5c3.073.034 6.144.549 9.059 1.52l1.58-4.744a34.758 34.758 0 0 0-10.586-1.776m-5.365.352a35.131 35.131 0 0 0-10.26 3.119l2.17 4.506a30.166 30.166 0 0 1 8.799-2.674zm20.908 3.51l-2.283 4.447a30.131 30.131 0 0 1 7.447 5.394l3.522-3.549a35.101 35.101 0 0 0-8.686-6.292M35 19.125c-19.3 0-35 15.7-35 35s15.7 35 35 35c8.934 0 17.087-3.374 23.275-8.904c.005 0 .01 0 .014.002c.065-.059.127-.121.191-.18l.125-.115a34.677 34.677 0 0 0 2.461-2.496c.083-.092.167-.183.248-.276c.399-.455.79-.919 1.165-1.394c-.482-.04-.961-.092-1.436-.155c-.318-.041-.632-.094-.947-.146c-.158-.026-.316-.046-.473-.074a29.93 29.93 0 0 1-1.383-.283a29.851 29.851 0 0 1-1.183-.301c-.065-.018-.13-.033-.194-.051C44.234 71.216 35 59.651 35 45.875a29.876 29.876 0 0 1 9.557-21.955c.162-.151.324-.302.49-.45c.249-.22.504-.436.76-.65c.158-.131.313-.266.474-.394c.415-.332.837-.656 1.27-.965a35.075 35.075 0 0 0-2.867-.965l-.03-.008c-.287-.082-.577-.155-.867-.23c-.215-.056-.43-.118-.646-.17c-.349-.084-.701-.155-1.053-.229c-.126-.026-.25-.057-.377-.082l-.002.002A34.83 34.83 0 0 0 35 19.125m58.2 5.928l-4.028 2.967a30.012 30.012 0 0 1 4.252 8.15l4.736-1.606a34.98 34.98 0 0 0-4.96-9.511m6.294 14.717l-4.924.87c.536 3.029.603 6.145.194 9.19l4.955.666c.48-3.562.4-7.19-.225-10.726M93.8 54.338a30.198 30.198 0 0 1-3.936 8.314l4.143 2.801a35.162 35.162 0 0 0 4.586-9.695zm-6.803 11.928a29.79 29.79 0 0 1-7.213 5.687l2.451 4.358a34.776 34.776 0 0 0 8.428-6.647zm-11.394 7.638a30.155 30.155 0 0 1-9.002 1.887l.265 4.992a35.12 35.12 0 0 0 10.498-2.199z' color='%23000'/%3E%3C/svg%3E");

  background-color: currentcolor;
  mask-image: var(--svg);
  mask-repeat: no-repeat;
  mask-size: 100% 100%;
}
</style>
